<template>
  <view class="sww-calender-box" :style="{'--color':vuex_config.themeColor1}">
    <!--  按钮-->
    <view class="sww-calender-title">
      <view class="sct-icon" @click="monthChange(false)">
        <u-icon name="e779" size="30" custom-prefix="iconfont"></u-icon>
      </view>
      <view class="sct-text">{{textDate}}</view>
      <view class="sct-icon" @click="monthChange(true)">
        <u-icon name="e775" size="30" custom-prefix="iconfont"></u-icon>
      </view>
    </view>
    <!--  日历时间-->
    <view class="sww-calender-week">
      <block v-for="(item, index) in weekList" :key="index">
        <view class="scw-item">{{item}}</view>
      </block>
    </view>
    <!--  -->
    <view class="sww-calender-day">
      <!--    上月天数-->
      <block v-for="(item, index) in befDays" :key="'prefix_' + index">
        <view class="scd-item scd-item-desc">
          <view class="scd-date">{{item}}</view>
          <view class="scd-desc"></view>
        </view>
      </block>
      <!--    当月-->
      <block v-for="(item, index) in currentDays" :key="index">
        <view class="scd-item"
              :class="{'scd-item-desc': getState(item.fullDate), 'scd-item-act': item.date === actDate}"
              @click="dateClick(item)">
          <view class="scd-date">{{item.date}}</view>
          <view class="scd-desc" style="color: red;font-size: 30rpx;">{{checkDesc(item.date)}}</view>
        </view>
      </block>
      <!--    下月-->
      <block v-for="(item, index) in aftDays" :key="'suffix_' + index">
        <view class="scd-item scd-item-desc">
          <view class="scd-date">{{item}}</view>
          <view class="scd-desc"></view>
        </view>
      </block>
    </view>
  </view>
</template>
<script>
import {getDateObject, getMoment} from "@/utils/moment";

export default {
  props: {
    descList: {
      type: Array
    }
  },
  data() {
    return {
      textDate: '',
      weekList: ['一', '二', '三', '四', '五', '六', '日'],
      currentDate: {}, //当前月份
      currentDays: [], //当前月份天数
      befDays: [], //上个月暴露出的天数
      aftDays: [], //下个月暴露出的天数

      minDate: getMoment().format('YYYY-MM-DD'), //可选的最小日期
      maxDate: '', //可选的最大日期
      actDate: 0, //当前选择的日期
    }
  },

  computed: {
    getState(fullDate) {
      return (fullDate) => {
        if (this.minDate && fullDate < this.minDate) {
          return true
        } else if (this.maxDate && fullDate > this.maxDate) {
          return true
        } else {
          return false
        }
      }
    },
    checkDesc(date) {
      return (date) => {
        if (this.descList) {
          let item = this.descList.find(item => item.date === date)
          if (item) return item.value
        }
        return ''
      }
    }
  },

  methods: {
    //初始化日历
    initData(date, type = 'month') {
      this.currentDate = getDateObject(date)
      this.befDays = this.getBefDays(this.currentDate.befDate, this.currentDate.firDay)
      this.aftDays = this.getAftDays(this.currentDate.days, this.currentDate.lastDay, this.currentDate.firDay)
      this.currentDays = this.getCurrentDays(this.currentDate.days, this.currentDate.date, this.currentDate.year, this.currentDate.month)
      this.actDate = this.currentDate.date
      this.textDate = `${this.currentDate.year}年${this.formatNumber(this.currentDate.month)}月`
      this.submitValue(type)
    },
    //生成上月暴露天数
    getBefDays(days, week) {
      days = getMoment(days, 'YYYY-MM-DD').daysInMonth()
      if (week > 1) {
        let arr = []
        for (let i = 0; i < week - 1; i++) {
          arr.push(days - i)
        }
        return arr
      } else {
        return []
      }
    },
    //生成下月暴露天数
    getAftDays(days, week, fWeek) {
      let len = 42 - (days + fWeek - 1)
      let arr = []
      for (let i = 1; i <= len; i++) {
        arr.push(i)
      }
      return arr
    },
    //生成当月暴露天数
    getCurrentDays(days, date, year, month) {
      let arr = []
      for (let i = 1; i <= days; i++) {
        arr.push({date: i, desc: '', fullDate: this.getFullDate(year, month, i)})
      }
      return arr
    },
    //生成年月日
    getFullDate(year, month, date) {
      return `${year}-${this.formatNumber(month)}-${this.formatNumber(date)}`
    },
    formatNumber(n) {
      if (n) {
        n = n.toString()
        return n[1] ? n : '0' + n
      } else {
        return '00'
      }
    },
    //切换天
    dateClick(item) {
      if (this.getState(item.fullDate)) return
      this.actDate = item.date
      this.submitValue('date')
    },
    //切换月
    monthChange(type) {
      if (type) { //下个月
        this.initData(this.currentDate.aftDate)
      } else { //上个月
        this.initData(this.currentDate.befDate)
      }
    },
    //更新日期到父组件
    submitValue(type) {
      this.$emit('change', {
        ...this.currentDate,
        date: this.actDate,
        type,
        curMonth: getMoment(this.getFullDate(this.currentDate.year, this.currentDate.month, this.actDate), 'YYYY-MM-DD')
      })
    },
    //父组件调用，修改当月天数desc
    resetCurrentDays(list, callback) {
      this.currentDays = callback(this.currentDays, list)
    }
  }
}
</script>
<style lang="scss" scoped>
/*公共样式*/
.f-28 {
  font-size: 28rpx;
}
.sww-calender-box {
  background-color: #FFFFFF;
  width: 100%;
}
/*头部*/
.sww-calender-title {
  width: 100%;
  height: 70rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sct-text {
  width: 300rpx;
  line-height: 70rpx;
  text-align: center;
  font-size: 30rpx;
}
.sct-icon {
  width: 70rpx;
  height: 70rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
/*周*/
.sww-calender-week {
  width: 100%;
  height: 76rpx;
  display: flex;
}
.scw-item {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
}
/**/
.sww-calender-day {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 100rpx;
}
.scd-item {
  display: flex;
  flex-direction: column;
  line-height: 1;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.scd-date {
  font-size: 30rpx;
}
.scd-desc {
  font-size: 22rpx;
  white-space: nowrap;
  overflow: hidden;
  margin-top: 10rpx;
  color: #999999;
}
.scd-item-act {
  background-color: var(--color);
}
.scd-item-act .scd-date {
  color: #FFFFFF;
}
.scd-item-act .scd-desc {
  color: #FFFFFF;
}
.scd-item-desc {
  background-color: inherit;
}
.scd-item-desc .scd-date {
  color: #999999;
}
.scd-item-desc .scd-desc {
  color: #999999;
}

</style>
